<template>
	<view class="nav">
		<view class="qq">
			<image src="../../static/地图-地标.png" mode="" class="img"></image>
			<view class="quan">全国</view>
		</view>
		<view class="zx">
			<uni-section class="uni" title="自定义样式" subTitle="使用 bgColor 属性自定义背景色" type="line">
				<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
			</uni-section>
		</view>
		<view class="top1">
			<p class="p1">我要卖车</p>
			<span class="span1">提交信息，快速获取估价</span>
			<view class="uni-column">
				<input class="uni-input" confirm-type="search" placeholder="请输入手机号" />
				<button>立即估值</button>
			</view>
		</view>
		<view class="top2">
			<view class="t1">
				<image class="ag" src="../../static/代购.png" mode=""></image>
				<span class="sp">全国代购</span>
			</view>
			<view class="t1">
				<image class="ag" src="../../static/商店.png" mode=""></image>
				<span class="sp">到店估值</span>
			</view>
		</view>
		<!-- 便捷选车 -->
		<view class="top3">
			<p class="p1">便捷选车</p>
			<view class="ew">
				<view class="us" v-for="item in rolesList" key="index">
					<image class="sge" :src="item.logo" mode=""></image>
					<p class="px" style="display: inline-block;margin-left: 12px;">{{item.label}}</p>
				</view>
			</view>
			<view class="wan">
				<view class="we" v-for="item in lists" key="index">
					<span class="span2">{{item.label}}</span>
				</view>
			</view>
			<view class="wan">
				<view class="we" v-for="item in list" key="index">
					<span class="span2">{{item.label}}</span>
				</view>
			</view>
		</view>
		<!-- 二手车 -->
		<view class="top4">
			<p class="p1">便捷选车</p>
			<view class="er">
				<view class="er1" v-for="item in shou" key="index">
					<image class="im" :src="item.cover" mode=""></image>
					<p class="pp">{{item.carName}}</p>
					<text>{{item.ind}}</text>/<text>{{item.mileage}}万公里</text> <br />
					<span class="s1" style="color: red;">{{item.currentPrice}}万</span>
				</view>
			</view>
		</view>
		<!-- 新车 -->
		<view class="top5">
			<p class="p1">新车</p>
			<view class="v1" v-for="item in xing" key="index">
				<p class="pag">{{item.carBrandMarker}}</p>
				<samp>{{item.type}}</samp><samp>{{item.colorLabel}}</samp><br />
				<span class="s1" style="color: red;margin-top: 20px;display: inline-block;margin-left: 10px;">{{item.currentPrice}}万</span>
			</view>
		</view>
		<!-- 新闻咨询 -->
		<view class="top6">
		 <p class="p1">新闻咨询</p>
			<view class="er">
				<view class="er2" v-for="item in wen" key="index">
					<image class="im" :src="item.cover" mode=""></image>
					<p class="pp">{{item.title}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive,ref} from "vue"
	import {baoma,second,xin,news} from "../../utils/ajax.js"
	const rolesList = reactive([])
	const list = reactive([])
	const lists = reactive([])
	const shou = reactive([])
	const xing = reactive([])
	const wen = reactive([])
	baoma().then(res => {
		console.log(res);
		rolesList.push(...res.data.data.convenientBrands)
		list.push(...res.data.data.convenientModels)
		lists.push(...res.data.data.convenientPrices)
		console.log(res.data.data.convenientBrands);
	})
	// 二手车
	second().then(res=>{
		console.log(res);
		shou.push(...res.data.data.content)
	})
	// 新车
	xin().then(res=>{
		console.log(res);
		xing.push(...res.data.data.content)
	})
	// 新闻咨询
	news().then(res=>{
		console.log(res);
		wen.push(...res.data.data.splice(0,4))
	})
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.nav {
		position: relative;
	}

	.qq {
		position: relative;
		width: 200rpx;
		/* border: 1px solid; */
		left: 30rpx;
		top: 20rpx;
	}

	.img {
		top: 5rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.quan {
		position: absolute;
		top: 0;
		left: 40rpx;
	}

	.uni {
		position: absolute;
		width: 550rpx;
		top: -10rpx;
		left: 150rpx;
	}

	.top1 {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		/* background-color: red; */
		margin-top: 70rpx;
		background-image: url(../../static/背景图.png);
		background-size: 100% 100%;
	}

	.p1 {
		width: 150rpx;
		text-align: center;
		border-left: 4px solid blue;
		font-weight: 600;
	    color: #333;
		font-size: 4.8vw;
	}

	.span1 {
		display: inline-block;
		color: #5685fe;
		font-size: 28rpx;
		margin-top: 30rpx;
		margin-left: 50rpx;
	}

	.uni-column {
		width: 80%;
		height: 10.8vw;
		margin-top: 10.8vw;
		background-color: white;
		margin-left: 50rpx;
	}

	.uni-input {
		display: inline-block;
		width: 25.6vw;
		height: 10.8vw;

		line-height: 10.8vw;
	}

	button {
		display: inline-block;
		width: 25.6vw;
		height: 10.8vw;
		float: right;
		height: 10.8vw;
		line-height: 70rpx;
		margin-right: 0rpx;
		background-color: #5685fe;
		color: white;
		font-size: 3.73333vw;
	}

	.top2 {
		width: 298px;
		height: 60px;
		margin: 20px auto;
		box-shadow: 0 0.26667vw 2.66667vw 0 rgb(170 170 216 / 40%);
	}

	.t1 {
		position: relative;
		width: 147px;
		height: 100%;
		display: inline-block;
	}

	.t1:nth-child(1) {
		/* border-right: 1px solid darkgray; */
	}

	.top3 {
		width: 100%;
		height: 245px;
	}

	.ag {
		position: absolute;
		width: 20px;
		height: 20px;
		top: 20px;
		left: 20px;
	}

	.sp {
		position: absolute;
		top: 20px;
		left: 50px;
	}

	.ew {
		width: 100%;
		height: 95.5px;
		display: flex;
		justify-content: space-between
	}

	.us {
		width: 65px;
		height: 91px;
	}

	.sge {
		width: 65px;
		height: 65px;
	}

	.wan {
		display: flex;
		justify-content: space-between
	}

	.we {
		width: 77px;
		height: 29px;
		margin-top: 15px;
	}

	.span2 {
		display: inline-block;
		width: 100%;
		height: 100%;
		font-size: 3.2vw;
		font-weight: 400;
		color: #333;
		line-height: 9.06667vw;
		background: #f5f7fe;
		border-radius: 4vw;
		text-align: center;
	}
	.er1{
		display: inline-block;
		width: 43.33333vw;
		height: 69.06667vw;
		background-color: #fff;
		border-radius: 1.86667vw;
		border: 1px solid #f5f7fe;
		margin-left: 10px;
	}
	.im{
		width: 45.33333vw;
		height: 33.86667vw;
		border-radius: 1.86667vw 1.86667vw 0 0;
	}
	.pp{
		   width: 178px;
		    overflow: hidden;
		     text-overflow: ellipsis;
		     white-space: nowrap;
		    -webkit-line-clamp: 2;
		    line-clamp: 2;
		    -webkit-box-orient: vertical;
		    height: 7.2vw;
	}
	text{
		font-size: 12px;
	}
	.v1{
		width: 100%;
		height: 115px;
	}
	.pag{
		font-size: 4vw;
		font-weight: 600;
		color: #333;
		line-height: 8.6vw;
		margin-left: 10px;
	}
	samp:nth-child(2){
		width: 57px;
		height: 15px;
		display: inline-block;
		background-color: #5685fe;
		color: white;
		margin-left: 10px;
		font-size: 2.93333vw;
		text-align: center;
	}
	samp:nth-child(3){
	    padding-left: 3.33333vw;
	    padding-right: 1.33333vw;
	    border-radius: 0.53333vw;
	    font-size: 2.93333vw;
	    text-align: center;
	    line-height: 4vw;
	}
	.er2{
		display: inline-block;
		width: 44.33333vw;
		height: 49.06667vw;
		background-color: #fff;
		border-radius: 1.86667vw;
		border: 1px solid #f5f7fe;
		margin-left: 10px;
	}
</style>
